import { createApp, defineComponent, h, reactive, ref } from 'vue'
// import App from './App.vue'
import HelloWorld from './components/HelloWorld_.vue'
// import img from './assets/logo.png'
import App from './App'
// const app = defineComponent({
//   setup() {
//     // setup 的变量都要是 响应式
//     const state = reactive({
//       name: 'shelley',
//     })
//     const numberRef = ref(1)
//     setInterval(() => {
//       state.name += '1'
//       numberRef.value += 1
//     }, 1000)
//     const number = numberRef.value;
//     return () => {
//       // 嵌套节点
//       // 原生节点/组件对象, 节点的属性，孩子节点
//       return h('div', { id: 1234 }, [
//         h('img', {
//           alt: 'Vue Logo',
//           src: img,
//         }),
//         h('p', state.name + number), // 不会增加为什么？
//       ])
//     }
//   },
// })
// 解决：
//
// const app = defineComponent({
//   setup() {
//     // setup 的变量都要是 响应式
//     const state = reactive({
//       name: 'shelley',
//     })
//     const numberRef = ref(1)
//     setInterval(() => {
//       state.name += '1'
//       numberRef.value += 1
//     }, 1000)
//     // const number = numberRef.value // setup里的表达式执行一次，number永远都是1，闭包里的
//     return () => {
//       const number = numberRef.value // 放在这里，生效，外面无效，reactive和ref的变量的变化，会引起 return 函数的重新执行，而不会触发setup的重新执行 state.name 都需要放 这里执行，不要看代码是一样的，哈哈哈哈哈
//       // return h('div', { id: 1234 }, [
//       //   h('img', {
//       //     alt: 'Vue Logo',
//       //     src: img,
//       //   }),
//       //   h('p', state.name + number), // 不会增加
//       // ])
//
//     }
//   },
// })

createApp(App).mount('#app')
